<template>
  <div class="consumption o-a">
    <Page-title :title="title" />
    <div class="h447 f f-ai-c f-jc-c mt30">
      <div class="consumption-title f-col f-ai-c f-jc-c">产能信息</div>
      <div class="consumption-top-box w553 ml60">
        <div class="consumption-box-title">实时统计</div>
        <div class="h61 mt30 f f-ai-c f-jc-c">
          <div class="count-item">
            <div>当月目标</div>
            <div>{{ realTime.monthTarget || 0 }}</div>
          </div>
          <div class="count-item">
            <div>实际累计</div>
            <div>{{ realTime.accumulate || 0 }}</div>
          </div>
          <div class="count-item">
            <div>上月达成率</div>
            <div>{{ realTime.monthRate || 0 }}%</div>
          </div>
        </div>
        <Ring
          cid="actual-time"
          :value="`${realTime.todayRate || 0}%`"
          :data="actualList"
          height="calc(100% - 91px)"
        />
      </div>
      <div class="consumption-top-box w553 ml30">
        <div class="consumption-box-title">近10天达成率</div>
        <div v-if="nearYList.length" id="near-rate" />
        <Empty v-else />
      </div>
      <div class="consumption-top-box w556 ml30">
        <div class="consumption-box-title">达成率</div>
        <div class="f-1" style="height: 100%">
          <Pie-charts
            cid="consumption-rate"
            :data="dataCount"
            :labels="dataLabels"
            :position="[
              ['35%', '25%'],
              ['35%', '75%'],
              ['65%', '25%'],
              ['65%', '75%'],
            ]"
            :tooltip="false"
            :radius="['22%', '28%']"
            label-size="16px"
            :colors="limitColor"
          />
        </div>
      </div>
    </div>
    <div class="h447 f f-ai-c f-jc-c mt32">
      <div class="consumption-title f-col f-ai-c f-jc-c">能耗信息</div>
      <div class="consumption-bottom-box w846 ml60">
        <div class="consumption-box-title">水单耗</div>
        <div v-if="waterYList.length" id="consumption-water" />
        <Empty v-else />
      </div>
      <div class="consumption-bottom-box w846 ml30">
        <div class="consumption-box-title">电单耗</div>
        <div v-if="electricityYList.length" id="consumption-electricity" />
        <Empty v-else />
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Ring from "@/views/srceen/workshop/cp/Ring";
export default {
  components: { Ring },
  props: {
    // 标题
    title: {
      type: String,
      default: "",
    },
    // 实时统计
    actualList: {
      type: Array,
      default: () => [],
    },
    // 实时统计
    realTime: {
      type: Object,
      default: () => {
        return {
          monthTarget: 0, // 本月目标
          accumulate: 0, // 累计
          monthRate: 0, // 本月达成率
          todayRate: 0, // 今日达成率
        };
      },
    },
    // 近10天达成率x轴
    nearXList: {
      type: Array,
      default: () => [],
    },
    // 近10天达成率y轴
    nearYList: {
      type: Array,
      default: () => [],
    },
    // 近10天达成率颜色
    nearColor: {
      type: Array,
      default: () => [
        ["#f928f6", "#f928f6"],
        ["#30c27c", "#30c27c"],
        ["#00D1FF", "#00D1FF"],
      ],
    },
    // 达成率
    dataCount: {
      type: Array,
      default: () => [],
    },
    // 达成率单位
    dataLabels: {
      type: Array,
      default: () => ["班", "今日", "本周", "本月"],
    },
    // 电单耗x轴
    waterXList: {
      type: Array,
      default: () => [],
    },
    // 水单耗y轴
    waterYList: {
      type: Array,
      default: () => [],
    },
    // 水单耗/电单耗颜色
    colors: {
      type: Array,
      default: () => [
        ["#FFFE54", "#FFFE54"],
        ["#00D1FF", "#00D1FF"],
      ],
    },
    // 电单耗x轴
    electricityXList: {
      type: Array,
      default: () => [],
    },
    // 电单耗y轴
    electricityYList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      limitColor: [
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#FF4545" },
            { offset: 0.49, color: "#ED4141" },
          ]),
          bgColor: "#ED414133",
          max: 49,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#ED9E41" },
            { offset: 0.5, color: "#FBFF45" },
            { offset: 0.89, color: "#ED9E41" },
          ]),
          bgColor: "#FBFF4533",
          max: 89,
        },
        {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: "#44f7af" },
            { offset: 0.5, color: "#43dfcb" },
            { offset: 0.89, color: "#41c6ea" },
            { offset: 1, color: "#44f7af" },
          ]),
          bgColor: "#44f7af33",
          max: 100,
        },
      ],
    };
  },
  watch: {
    nearYList: {
      handler() {
        this.$nextTick(() => {
          this.initChart(
            this.nearXList,
            this.nearYList,
            "near-rate",
            this.nearColor,
            45,
            "",
            "down"
          );
        });
      },
      deep: true,
    },
    waterYList: {
      handler() {
        this.$nextTick(() => {
          this.initChart(
            this.waterXList,
            this.waterYList,
            "consumption-water",
            this.colors,
            0,
            "吨"
          );
        });
      },
      deep: true,
    },
    electricityYList: {
      handler() {
        this.$nextTick(() => {
          this.initChart(
            this.electricityXList,
            this.electricityYList,
            "consumption-electricity",
            this.colors,
            0,
            "度"
          );
        });
      },
      deep: true,
    },
  },
  methods: {
    initChart(xlist, data, cid, colors, rotate, unit, arrow) {
      let domid = document.getElementById(cid);
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let legData = [];
      let series = [];
      data.forEach((item, index) => {
        legData.push({
          name: item.name,
          itemStyle: { opacity: 1, color: colors[index][0] },
        });
        let itemObj = {
          data: item.data,
          type: item.type,
          name: item.name,
          smooth: true,
          barWidth: "35%",
          showSymbol: item.showSymbol,
          itemStyle: {
            color: (e) => {
              let colorItem = colors[index];
              if (arrow === "down") {
                if (index === 1 && item.data[e.dataIndex] < data[0].data[e.dataIndex]) {
                  colorItem = ["#F63F3F", "#F63F3F"];
                }
              } else {
                if (index === 1 && item.data[e.dataIndex] >= data[0].data[e.dataIndex]) {
                  colorItem = ["#F63F3F", "#F63F3F"];
                }
              }
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: colorItem[0] },
                  { offset: 1, color: colorItem[1] },
                ],
                false
              );
            },
          },
        };
        if (item.area) {
          itemObj.symbolSize = 14;
          itemObj.areaStyle = {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: colors[index][0] },
              { offset: 1, color: colors[index][1] + "33" },
            ]),
          };
        }
        series.push(itemObj);
      });
      let color = [];
      colors.forEach((i) => {
        color.push({
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: i[0] },
            { offset: 1, color: i[1] },
          ],
          global: false,
        });
      });
      let option = {
        color: color,
        grid: {
          top: "18%",
          left: "5%",
          right: "8%",
          bottom: "8%",
          containLabel: true,
        },
        tooltip: { show: false },
        legend: {
          show: true,
          top: "7%",
          right: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        },
        xAxis: {
          type: "category",
          data: xlist,
          axisTick: {
            show: false,
            alignWithLabel: true,
          },
          axisLine: {
            show: false,
            lineStyle: { color: "#5a718b" },
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: rotate,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          show: data.length > 0,
          type: "value",
          name: unit,
          offset: 20,
          nameGap: 10,
          nameLocation: "start",
          nameTextStyle: {
            fontSize: 12,
            color: "#DFEFFF",
            align: "right",
          },
          splitLine: {
            show: true,
            lineStyle: { color: "rgba(69,244,255,0.5)" },
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              fontSize: 14,
              color: "#fff",
            },
          },
        },
        series: series,
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.consumption {
  height: 1080px;
  background-color: #051735;
  background: url("~@/assets/img/bg.png");
  &-title {
    width: 63px;
    height: 447px;
    background: url("~@/assets/home/screen-left-title-bg4.png") no-repeat;
    background-size: 100% 100%;
    font-family: YouSheiBlack;
    font-size: 32px;
    color: #45f4ff;
    letter-spacing: 2px;
    writing-mode: vertical-lr;
  }
  &-box {
    height: 100%;
    position: relative;
    &-title {
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      font-family: YouSheiBlack;
      font-size: 32px;
      color: #45f4ff;
      letter-spacing: 2px;
    }
    #near-rate,
    #consumption-water,
    #consumption-electricity {
      flex: 1;
      height: 100%;
    }
  }
  &-top-box {
    @extend .consumption-box;
    background: url("~@/assets/img/bg12.png") no-repeat;
    background-size: 100% 100%;
    .count-item {
      min-width: 130px;
      text-align: center;
      position: relative;
      &::after {
        content: "";
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(255, 255, 255, 1) 50%,
          rgba(255, 255, 255, 0) 100%
        );
      }
      &:last-child:after {
        display: none;
      }
      > div:first-child {
        font-size: 14px;
        color: #fff;
      }
      > div:last-child {
        margin-top: 10px;
        font-size: 24px;
        color: #45f4ff;
      }
    }
  }
  &-bottom-box {
    @extend .consumption-box;
    background: url("~@/assets/img/bg13.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
